﻿<div>

    <script type="text/javascript">
        $(function () {
            var tg = $("#t1").treegrid({
                title: 'test treegrid',
                width: 900,
                height: 400,
                method: "get",
                idField: 'id',
                treeField: 'name',
                remoteSort: false,
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'id', title: 'ID(id)', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'name', title: '名称(name)', width: 180, sortable: true },
                    { field: 'age', title: '年龄(age)', width: 120, sortable: true }
                ]],
                enableHeaderClickMenu: true,
                enableHeaderContextMenu: true,
                enableRowContextMenu: true
            });

            $("#Button1").click(function () {
                tg.treegrid("append", { data: [{ id: 2, name: "测试节点B", age: 222 }] });
            });

            $("#Button2").click(function () {
                var b = tg.treegrid("pop", 2);
                //tg.treegrid("append", { data: [{ id: 1, name: "测试节点A", age: 111 }] });
                //tg.treegrid("append", { parent: 1, data: [b]});
                tg.treegrid("append", { data: [{ id: 1, name: "测试节点A", age: 111, children: [b] }] });
            });
        });
    </script>

    <h2>jEasyUI DataGrid Extensions - 功能扩展集合演示</h2>
    <p>该部分扩展由文件 jeasyui.extensions.treegrid.js 实现。</p>
    <hr />
    <p>该 DEMO 将本扩展中的诸多功能进行集成方式的集中展示</p>

    <input id="Button1" type="button" value="添加一个节点" />
    <input id="Button2" type="button" value="添加另一节点" />

    <hr />
    <table id="t1"></table>

</div>